<script setup>
import { ref } from 'vue'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute()
const $router = useRouter()

const props = defineProps(['customId', 'productList'])
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const openProductForm = ref({
  id: null,
  custom_id: props.customId,
  start_time: '',
  cycle: '',
  end_time: '',
  clip_num: '',
  product_id: '',
})

const getOpenCustomLog = async (page) => {
  try {
    const res = await api.get('system/contract/openCustomLog', {
      params: {
        page,
        pageSize: pageSize.value,
      },
    })
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const showModifyForm = async (record) => {
  openProductForm.value.id = record.id
  openProductForm.value.start_time = record.start_time
  openProductForm.value.cycle = record.cycle
  openProductForm.value.end_time = record.end_time
  openProductForm.value.clip_num = record.clip_num
  openProductForm.value.product_id = record.product_id
    .split(',')
    .map((e) => e * 1)
  formVisible.value = true
}

const getEndTime = async () => {
  var start_time = openProductForm.value.start_time
  var cycle = openProductForm.value.cycle
  if (start_time && cycle) {
    var dd = new Date(openProductForm.value.start_time)
    dd.setDate(dd.getDate() + cycle) //获取n天后的日期
    var y = dd.getFullYear()
    var m = dd.getMonth() + 1
    var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
    var h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
    var min = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
    var s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
    let day = y + '-' + m + '-' + d
    openProductForm.value.end_time = day
  }
}

const formSubmit = async () => {
  console.log('openProductForm', openProductForm.value)
  var obj = { ...openProductForm.value }
  obj.product_id = obj.product_id.toString()
  if (!obj.start_time) {
    Message.error('开通日期不可为空')
    return false
  }
  if (!obj.cycle) {
    Message.error('开通周期不可为空')
    return false
  }
  if (!obj.product_id) {
    Message.error('开通产品不可为空')
    return false
  }
  if (!obj.clip_num) {
    Message.error('剪辑次数不可为空')
    return false
  }
  try {
    const res = await api.post('custom/updateCustomLog/' + obj.id, obj)
    Message.success(res.message)
    formVisible.value = false
    getOpenCustomLog(1)
    resetOpenProductForm()
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const resetOpenProductForm = async () => {
  openProductForm.value = {
    custom_id: props.customId,
    start_time: '',
    cycle: '',
    end_time: '',
    clip_num: '',
    product_id: '',
  }
}

// getOpenCustomLog(1)

defineExpose({
  getOpenCustomLog,
})
</script>

<template>
  <a-table :data="listData"
           @page-change="getOpenCustomLog"
           :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
    <template #columns>
      <a-table-column title="序号"
                      :width="60">
        <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
      </a-table-column>
      <a-table-column title="开通日期"
                      data-index="start_time"></a-table-column>
      <a-table-column title="开通周期"
                      data-index="cycle"></a-table-column>
      <a-table-column title="截止日期"
                      data-index="end_time"></a-table-column>
      <a-table-column title="开通产品"
                      data-index="product"></a-table-column>
      <a-table-column title="剪辑次数"
                      data-index="clip_num"></a-table-column>
      <!-- <a-table-column title="操作" align="center" :width="300">
				<template #cell="{ record }">
					<a-space>
						<a-popconfirm @ok="deleteData(record)"
                          content="确认删除该数据吗?"
                          type="warning">
              <a-button type="primary"
                        status="danger"
                        size="mini">删除</a-button>
            </a-popconfirm>
						<a-button
							@click="showModifyForm(record)"
							type="primary"
							size="mini"
							>编辑</a-button
						>
					</a-space>
				</template>
			</a-table-column> -->
    </template>
  </a-table>

  <a-modal title="编辑日志"
           width="600px"
           :on-before-ok="formSubmit"
           v-model:visible="formVisible">
    <a-form>
      <a-form-item label="开通日期">
        <a-date-picker @blur="getEndTime"
                       v-model="openProductForm.start_time"
                       style="width: 400px"
                       placeholder="请选择开通日期" />
      </a-form-item>
      <a-form-item label="开通周期">
        <a-input-number @blur="getEndTime"
                        v-model="openProductForm.cycle"
                        :style="{ width: '400px' }"
                        placeholder="请输入开通周期"
                        class="input-demo"
                        :min="0" />
      </a-form-item>
      <a-form-item label="截止日期">
        <a-date-picker v-model="openProductForm.end_time"
                       :disabled="true"
                       style="width: 400px"
                       placeholder=" " />
        <template #extra>
          <div style="color: red">
            当前日期下已有进行中的订单，将根据订单截止时间顺延周期时间
          </div>
        </template>
      </a-form-item>
      <a-form-item label="开通产品">
        <a-checkbox-group v-model="openProductForm.product_id">
          <a-checkbox v-for="(item, index) in props.productList"
                      :key="index"
                      :value="item.id">{{ item.title }}</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="剪辑次数">
        <a-input-number v-model="openProductForm.clip_num"
                        :style="{ width: '400px' }"
                        placeholder="请输入剪辑次数"
                        class="input-demo"
                        :min="0" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
